<template>
    <div class="common-layout">
        <el-container>

            <el-container>

                <!-- 左侧列表 -->
                <el-aside>


                    <Aside></Aside>

                </el-aside>

                <!-- 主题内容 -->
                <el-container>


                    <el-main>


                        <router-view></router-view>

                        <!-- 主题内容的背景 -->
                        <div class="backimg">
                            <img src="../../public/images/pic_shouye.png" alt="">
                        </div>
                        <div>

                        </div>

                    </el-main>



                </el-container>


            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import Aside from './Aside.vue'


</script>

<style scoped>
/* 主题表格 */
.common-layout .el-container>.el-container .el-main .el-table {
    margin-top: 5%;
}

/* 主题表格悬停效果  */
::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #4b5a71;
    color: #fff;
}

::v-deep .el-table--enable-row-hover .el-table__body tr {
    /* color: red; */

    height: 60px;
}



/deep/ .el-table__inner-wrapper::before {
    background-color: transparent;
}

/deep/ .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
    border: 0;
}

/deep/ .el-table .tbody {
    border: 0;
}

/* 左侧列表 */
.common-layout .el-container>.el-container .el-aside {
    display: flex;
    justify-content: center;
    flex-direction: column;
    /* flex-wrap: wrap; */
    width: 240px;
    height: 100vh;
    background-color: rgba(28, 29, 34);
    position: relative;
}

.common-layout .el-container>.el-container .el-aside .logo {
    position: absolute;
    top: 0%;
    left: 20%;
    display: flex;
    align-items: center;
    /* background-color: pink; */
    height: 15%;
}

/* leftBar */
.leftBar {
    margin-top: -40px;
    width: 100%;
    height: 60%;
    /* overflow: hidden; */
    /* background-color: pink; */

}

/deep/ .el-col {
    width: 100%;

}



.common-layout {
    width: 100%;

    /* background: url('./public/images/2.webp') no-repeat; */
    background-size: cover;
}

.common-layout img {}

.common-layout .el-header {
    height: 80px;
    /* background-color: pink; */
}


/* 主题内容 */
.common-layout .el-container>.el-container {
    /* height: 100vh; */

}

/* 主题内容main */
.common-layout .el-container>.el-container .el-main {

    background: rgb(21, 21, 29);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    /* align-items: center; */
    /* background-color: pink; */

}



/* 主题内容背景图片 */
.backimg {
    width: 100%;
    /* background-color: pink; */
    display: flex;
    justify-content: center;
}

.backimg img {
    width: 450px;
    position: fixed;
    top: 30%;
    left: 50%;
    /* background-color: pink; */

    /* margin-top: -40px; */


}

.common-layout .el-container>.el-container .el-main h1 {
    color: #fff;
    font-size: 20px;
    position: absolute;
    top: 70%;
    left: 56%;
    /* display: none; */
}

/* Footer */
.common-layout .el-container>.el-container .el-footer {
    background-color: rgb(25, 25, 30);

}

.demo-type {
    display: flex;
}

.demo-type>div {
    flex: 1;
    text-align: center;
}

.demo-type>div:not(:last-child) {
    border-right: 1px solid var(--el-border-color);
}

.example-pagination-block+.example-pagination-block {
    margin-top: 90px;
    background-color: transparent;
}

.example-pagination-block .example-demonstration {
    margin-bottom: 16px;
    background-color: transparent;

}

.el-menu {
    background-color: #41587a;
}

.el-menu:hover .el-sub-menu {
    background-color: #000000;

}

.el-sub-menu span {
    color: #fff;

}

.el-sub-menu .el-icon {
    color: #fff;
}

/* 修改子菜单的背景色 */

.el-menu-item {
    background-color: rgba(28, 29, 34);
    color: #fff;

}

/* 鼠标悬浮时，子菜单的样式： */

.el-menu-item:hover {
    outline: 0 !important;
    color: #0075f3 !important;
}

.el-menu-item.is-active {
    color: #000000 !important;
    background: #0773d7 !important;
}

/deep/ .el-icon {
    color: #fff;

}
</style>

